<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Globe World 3D</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        color: #602bdd;
        background-color: rgba(0, 0, 0, 0.8);
      }
    </style>
  </head>

  <body>
    <div id="main" style="height: 100%; width: 100%"></div>
    <script src="https://unpkg.com/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
    <script src="world.js"></script>
    <!-- <script src="https://code.juejin.cn/api/raw/7376489234334482483?id=7376489234334531635"></script> -->
    <script>
      var globeChart = null;
      var mapChart = null;
      let visited_areas = [];

      // 使用 Fetch API 调用后端接口获取访问地域列表
      async function loadAreas() {
        try {
          // const response = await fetch(`/api/images?area=${area}`);
          const response = await fetch(
            `http://localhost:8006/api/visited_areas`
          );

          if (!response.ok) {
            throw new Error("Failed to fetch visited_areas");
          }
          visited_areas = await response.json();
          console.error("Error loading visited_areas:", visited_areas);
        } catch (error) {
          console.error("Error loading visited_areas:", error);
        }
      }

      function setMapOption(data) {
        echarts.registerMap("world", data);
        const canvas = document.createElement("canvas");
        const visited_datas = visited_areas.map((visited_area) => ({
          name: visited_area,
          itemStyle: { areaColor: "yellow" }, // 设置填充色为黄色
        }));
        console.error("Error loading visited_areas22222:", visited_areas);

        // mapChart = echarts.init(canvas, null, {devicePixelRatio: 100})
        mapChart = echarts.init(canvas, null, {
          // devicePixelRatio: dpr,     // 添加该参数即可
          devicePixelRatio: 2, // 添加该参数即可
          width: 2048,
          height: 1024,
        });
        mapChart.setOption({
          backgroundColor: "rgba(3, 52, 93,.1)",
          geo: {
            type: "map",
            map: "world",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            boundingCoords: [
              [-180, 90],
              [180, -90],
            ],
            itemStyle: {
              borderWidth: 10,
              normal: {
                borderColor: "rgba(255,255,255,0.7)",
                areaColor: "rgba(0, 90, 171, 1)",
                label: {
                  show: false,
                },
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: "#602bdd",
                borderColor: "#f29100",
              },
            },
          },
          series: [
            {
              type: "scatter",
              coordinateSystem: "geo",
              label: { show: true },
              data: [
                {
                  value: [103.012761, 33.113421],
                  label: {
                    color: "rgba(25, 228, 253, 1)",
                    fontSize: 12,
                    fontWeight: "bold",
                    formatter: "爱你一万年",
                  },
                },
              ],
            },
            {
              type: "map",
              map: "world",
              itemStyle: {
                normal: {
                  areaColor: "rgba(0, 90, 171, 1)", // 其他地区颜色
                },
                emphasis: {
                  areaColor: "#602bdd",
                },
              },
              data: visited_datas,
            },
          ],
        });
        mapChart.on("click", function (params) {
          console.log("params", params);
          window.location.href =
            "./photo/China.html?area=" + params.name + "&id=" + 1;
        });
        // window.addEventListener("resize", mapChart.resize());
        $(document).bind("mousewheel DOMMouseScroll", function (event) {
          //on也可以 bind监听
          //Chorme
          mapChart.resize();
          // var wheel = event.originalEvent.wheelDelta;
          // var detal = event.originalEvent.detail;
          // if (event.originalEvent.wheelDelta) { //判断浏览器IE,谷歌滚轮事件
          //   if (wheel > 0) { //当滑轮向上滚动时
          //     alert('上滚')
          //   }
          //   if (wheel < 0) { //当滑轮向下滚动时
          //     alert('下滚')
          //   }
          // } else if (event.originalEvent.detail) {  //Firefox滚轮事件
          //   if (detal > 0) { //当滑轮向下滚动时
          //     alert('下滚')
          //   }
          //   if (detal < 0) { //当滑轮向上滚动时
          //     alert('上滚')
          //   }
          // }
        });
      }

      function setGlobeOption(param) {
        var globeChart = echarts.init(document.getElementById("main"));

        globeChart.setOption({
          globe: {
            baseTexture: mapChart,
            shading: "realistic",

            realisticMaterial: {
              roughness: 0.7,
              metalness: 0.5,
            },
            light: {
              ambient: {
                intensity: 0.6,
              },
              main: {
                intensity: 1,
                shadow: true,
              },
            },
            postEffect: {
              enable: true,
              bloom: 10,
            },
            viewControl: {
              center: [0, 0, 0],
              alpha: 20,
              beta: 50,
              autoRotate: true,
              autoRotateAfterStill: 3,
              distance: 200,
              autoRotateSpeed: 15,
            },
          },
        });
      }

      async function init() {
        await loadAreas(); // 等待 loadAreas 完成
        setMapOption(worldJson); // 然后再调用 setMapOption
        setGlobeOption();
      }

      init(); // 调用初始化函数
    </script>
  </body>
</html>
